<template>
  <div class="text-left padding-lr" v-loading.fullscreen.lock="loading">
    <div class="text-right">
      <el-button size="mini" type="success" @click="saveInfo">保存</el-button>
    </div>

    <template v-if="optionsData.channelFormulaMap">
      <el-tabs v-model="TabName" @tab-click="handleTableClick" type="card">
        <el-tab-pane
          v-for="(relate, j) in optionsData.relateMap"
          :label="relate"
          :name="j.toString()"
          :key="j"
        >
          <template>
            <TableComponent
              :ref="`table_${j}`"
              :tableColumns="optionsData.channelChargingSections"
              :tableData="optionsData.channelSubareas"
              :channelFormulaMap="optionsData.channelFormulaMap"
              :customerGroupVipPriceMap="optionsData.customerGroupVipPriceMap"
              :countrys="initData.countrys"
              :formula="formula"
              :countryStates="initData.countryStates"
            ></TableComponent>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template v-else>
      <div class="padding text-xl text-red">此渠道没有配置价格</div>
    </template>
  </div>
</template>

<script>
import TableComponent from "./components/TableComponent";
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      checkCustomerChannelId: "",
      customerGroupId: "",
      loading: false,
      customerChannelId: null,
      relateId: null,
      formula: null,
      value: "",
      activeName: "",
      TabName: "",
      optionsData: {
        channelFormulaMap: {}
      },
      oldOptionsData: {},
      initData: {}
    };
  },
  mounted() {
    console.log(this.$store.state)
    this.init();
  },
  methods: {
    m(k) {
      return m(k);
    },
    async init() {
      this.loading = true;
      const { data: initData } = await ajax("initcustomerGroupData", {});
      console.log("initData :>> ", initData);
      this.initData = initData ? initData : {};
      this.getInfo();
    },

    async getInfo() {
      this.loading = true;

      const { code, data } = await ajax("findCustomerGroupRelateChannelById", {
        // id: 2355,
        id: this.$store.state.edit.id,
        relateId: this.relateId
      });

      if (code === 200) {
        this.checkCustomerChannelId = data.checkCustomerChannelId;
        this.customerGroupId = data.customerGroupId;
        this.formula = data.formula;
        if (data.channelFormulaMap) {
          this.optionsData = data;
          this.oldOptionsData = data;
          this.TabName = data.checkRelateId.toString();
          console.log("obthis.optionsDataject :>> ", this.optionsData);
        } else {
          this.optionsData = {};
        }
      } else {
        this.$message.error("获取数据失败");
      }

      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleClick(tab, event) {
      console.log("tab :>> ", tab);

      this.customerChannelId = parseInt(tab.paneName);
      this.relateId = null;
      this.getInfo();
      // customerGroupId,  customerChannelId,  relateId
    },
    handleTableClick(tab, event) {
      this.relateId = parseInt(tab.paneName);
      this.getInfo();
    },
    async saveInfo() {
      this.loading = true;
      const tableInfo = [...this.$refs[`table_${this.TabName}`][0].tableInfo];
      const oldTableInfo = [
        ...this.$refs[`table_${this.TabName}`][0].oldTableInfo
      ];
      let arr = [];
      for (const [i, e] of tableInfo.entries()) {
        for (const j in e) {
          if (oldTableInfo[i][j].setFormula !== e[j].setFormula) {
            let obj = {
              customerGroupId: this.customerGroupId,
              customerChannelId: this.checkCustomerChannelId,
              relateId: this.TabName.toString(),
              formula: e[j].setFormula,
              subareaId: e[j].subareaId,
              chargingSectionId: e[j].chargingSectionId
            };
            arr.push(obj);
          }
        }
      }

      const data = await ajax("batchSaveOrUpdateCustomerGroupVipPrice", {
        customerGroupId: this.customerGroupId,
        customerGroupVipPrices: arr
      });

      console.log("data :>> ", data);
      this.loading = false;
      if (data.code === 200) {
        this.$message({
          type: "success",
          message: "保存成功"
        });
        this.getInfo();
      } else {
        this.$message.error(data.error || m(data.message));
      }
    }
  }
};
</script>

<style scoped>
/deep/ .el-tabs__nav.is-top {
  display: flex;
  flex-wrap: wrap;
}
</style>
